<template>
  <el-card class="box-card table">
    <template #header>
      <div class="card-header">
        <span>
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }"
              >权限管理</el-breadcrumb-item
            >
            <el-breadcrumb-item>权限列表</el-breadcrumb-item>
          </el-breadcrumb>
        </span>
        <router-link :to="{ path: '/auth/menu/add' }">
          <el-button
            class="button"
            type="success"
            icon="el-icon-circle-plus"
            size="small"
            current-node-key="[1,2]"
            >新增权限</el-button
          >
        </router-link>
      </div>
    </template>
    <div class="table">
      <el-table
        :data="tableData"
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        style="width: 100%"
      >
        <el-table-column label="权限名称" width="180">
          <template #default="scope">
            <span style="margin-left: 10px">{{ scope.row.name }}</span>
          </template>
        </el-table-column>

        <el-table-column label="权限类型" width="180">
          <template #default="scope">
            <span style="margin-left: 10px">{{ scope.row.type }}</span>
          </template>
        </el-table-column>
        <el-table-column label="权限标识" width="180">
          <template #default="scope">
            <span style="margin-left: 10px">{{ scope.row.permission }}</span>
          </template>
        </el-table-column>
        <el-table-column label="图标" width="180">
          <template #default="scope">
            <span style="margin-left: 10px">{{ scope.row.icon }}</span>
          </template>
        </el-table-column>
        <el-table-column label="路由地址" width="240">
          <template #default="scope">
            <span style="margin-left: 10px">{{ scope.row.path }}</span>
          </template>
        </el-table-column>
        <el-table-column label="是否禁用 0：正常 | 1：禁用" width="240">
          <template #default="scope">
            <span style="margin-left: 10px">
              <span v-if="scope.row.forbidden == 1">禁用</span>
              <span v-else>正常</span>
            </span>
          </template>
        </el-table-column>
        <el-table-column label="更新时间" width="240">
          <template #default="scope">
            <span style="margin-left: 10px">{{ scope.row.updated_at }}</span>
          </template>
        </el-table-column>
        <el-table-column label="创建者" width="180">
          <template #default="scope">
            <span style="margin-left: 10px">{{ scope.row.create_by }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="280">
          <template #default="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button size="mini" type="danger" @click="del(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <div class="fenye" v-if="total">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="sizes"
        :page-size="params.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>

    <!-- 分页结束 -->
  </el-card>
</template>

<script>
import { menuList,menuDelete } from "@/api/index.js";
import { ElMessage } from "element-plus";
export default {
  name: "MenuList",
  data() {
    return {
      tableData: [],
      total: null,
      currentPage: 1,
      sizes: [10, 20, 30, 40],
      params: {
        page: 1,
        size: 10,
      },
      loading: true,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    async getList() {
      var that = this;
      await menuList(this.params)
        .then(function (res) {
          if (res.code == 1) {
            // console.log(res.data);
            that.tableData = res.data.data;
            that.total = res.data.total;
            that.loading = false;
          }
        })
        .catch();
    },
    handleSizeChange(val) {
      console.log(val);
      this.params.size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      console.log(val);
      this.params.page = val;
      this.currentPage = val;
      this.getList();
    },
   async del(id) {
      var that = this;
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(function () {
          menuDelete({ id: id })
            .then((res) => {
              if (res.code == 1) {
                that.$message({
                  type: "success",
                  message: "删除成功!",
                });
                that.getList();
              }
            })
            .catch((error) => {
            });
        })
        .catch(function () {
          that.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>
<style scoped>
.fenye {
  margin-top: 30px;
}
</style>
